<template>
  <div class="mock-game-container">
    <!-- 游戏主界面 -->
    <div class="game-area">
      <!-- 游戏信息栏 -->
      <div class="game-header">
        <div class="game-info">
          <div class="time-display">剩余时间: {{ formatTime(gameTime) }}</div>
          <div class="player-info">
            <span>玩家: {{ currentPlayer.name }}</span>
            <span class="territory-area">领地: {{ Math.floor(currentPlayer.territoryArea) }}px²</span>
            <span class="rank">排名: #{{ currentPlayer.rank }}</span>
          </div>
        </div>
        <div class="power-up-display" v-if="currentPlayer.powerUp">
          <div class="power-up-icon" :class="currentPlayer.powerUp.type">
            {{ getPowerUpIcon(currentPlayer.powerUp.type) }}
          </div>
          <div class="power-up-timer">{{ currentPlayer.powerUp.remainingTime }}s</div>
        </div>
      </div>

      <!-- 游戏画布 -->
      <div class="game-canvas-container">
        <canvas 
          ref="gameCanvas" 
          :width="mapSize.width" 
          :height="mapSize.height"
          @mousemove="handleMouseMove"
          @keydown="handleKeyDown"
          @keyup="handleKeyUp"
          tabindex="0"
          class="game-canvas"
        ></canvas>
        
        <!-- 小地图 -->
        <div class="minimap">
          <canvas ref="minimapCanvas" width="150" height="150" class="minimap-canvas"></canvas>
        </div>

        <!-- 死亡复活界面 -->
        <div v-if="!currentPlayer.isAlive" class="death-overlay">
          <div class="death-message">
            <h2>{{ deathMessage }}</h2>
            <div class="respawn-timer">
              <div class="timer-circle">
                <span class="timer-text">{{ respawnCountdown }}</span>
              </div>
            </div>
            <button v-if="respawnCountdown <= 0" @click="respawn" class="respawn-btn">
              点击复活 (Space)
            </button>
          </div>
        </div>

        <!-- 特殊事件提示 -->
        <div v-if="specialEvent" class="special-event-overlay">
          <div class="event-notification">
            <h3>{{ specialEvent.name }}</h3>
            <p>{{ specialEvent.description }}</p>
            <div class="event-timer">{{ specialEvent.remainingTime }}s</div>
          </div>
        </div>
      </div>

      <!-- 排行榜 -->
      <div class="leaderboard">
        <h3>排行榜</h3>
        <div class="player-list">
          <div 
            v-for="(player, index) in sortedPlayers" 
            :key="player.id"
            class="player-item"
            :class="{ current: player.id === currentPlayer.id, dead: !player.isAlive }"
          >
            <span class="rank">#{{ index + 1 }}</span>
            <div class="player-color" :style="{ backgroundColor: player.color }"></div>
            <span class="player-name">{{ player.name }}</span>
            <span class="territory-size">{{ Math.floor(player.territoryArea) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 游戏控制说明 -->
    <div class="controls-info">
      <h4>游戏控制</h4>
      <div class="control-item"><kbd>WASD</kbd> 移动</div>
      <div class="control-item"><kbd>J</kbd> 使用道具</div>
      <div class="control-item"><kbd>Tab</kbd> 切换小地图</div>
      <div class="control-item"><kbd>Space</kbd> 短暂加速</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, nextTick } from 'vue'

// 游戏状态
const gameCanvas = ref(null)
const minimapCanvas = ref(null)
const gameTime = ref(180) // 3分钟游戏时间
const gameRunning = ref(true)

// 地图配置
const mapSize = reactive({
  width: 800,
  height: 800,
  radius: 390 // 圆形地图半径
})

// 当前玩家
const currentPlayer = reactive({
  id: 'player1',
  name: '我',
  x: 200,
  y: 200,
  color: '#FF6B6B',
  isAlive: true,
  isDrawing: false,
  movementSpeed: 200,
  territoryArea: 7854, // 初始安全区面积 π*50²
  rank: 1,
  path: [],
  territories: [],
  powerUp: null,
  spawnPoint: { x: 200, y: 200 },
  consecutiveDeaths: 0,
  invincibilityEndTime: null
})

// 其他玩家
const players = reactive([
  {
    id: 'player2',
    name: '玩家2',
    x: 600,
    y: 200,
    color: '#4ECDC4',
    isAlive: true,
    isDrawing: true,
    territoryArea: 6200,
    rank: 2,
    path: [
      { x: 600, y: 200 },
      { x: 650, y: 250 },
      { x: 700, y: 300 },
      { x: 680, y: 350 }
    ],
    territories: [],
    spawnPoint: { x: 600, y: 200 }
  },
  {
    id: 'player3',
    name: '玩家3',
    x: 400,
    y: 600,
    color: '#45B7D1',
    isAlive: true,
    isDrawing: false,
    territoryArea: 5100,
    rank: 3,
    path: [],
    territories: [],
    spawnPoint: { x: 400, y: 600 }
  },
  {
    id: 'player4',
    name: '玩家4',
    x: 200,
    y: 600,
    color: '#F7DC6F',
    isAlive: false,
    isDrawing: false,
    territoryArea: 2800,
    rank: 4,
    path: [],
    territories: [],
    spawnPoint: { x: 200, y: 600 }
  }
])

// 道具
const powerUps = reactive([
  {
    id: 'powerup1',
    type: 'lightning',
    x: 300,
    y: 300,
    collected: false
  },
  {
    id: 'powerup2',
    type: 'shield',
    x: 500,
    y: 400,
    collected: false
  },
  {
    id: 'powerup3',
    type: 'bomb',
    x: 350,
    y: 150,
    collected: false
  }
])

// 输入控制
const keys = reactive({
  w: false,
  a: false,
  s: false,
  d: false,
  space: false
})

// 特殊事件
const specialEvent = ref(null)
const deathMessage = ref('')
const respawnCountdown = ref(0)

// 计算属性
const sortedPlayers = computed(() => {
  return [currentPlayer, ...players].sort((a, b) => b.territoryArea - a.territoryArea)
})

// 游戏循环
let gameLoop = null
let lastTime = 0

// 道具图标映射
const getPowerUpIcon = (type) => {
  const icons = {
    lightning: '⚡',
    shield: '🛡️',
    bomb: '💣',
    ghost: '👻'
  }
  return icons[type] || '?'
}

// 时间格式化
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

// 检查圆形边界
const isWithinCircularBounds = (x, y) => {
  const centerX = mapSize.width / 2
  const centerY = mapSize.height / 2
  const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2)
  return distance <= mapSize.radius
}

// 检查道具拾取
const checkPowerUpPickup = () => {
  powerUps.forEach(powerUp => {
    if (!powerUp.collected) {
      const distance = Math.sqrt(
        (currentPlayer.x - powerUp.x) ** 2 + 
        (currentPlayer.y - powerUp.y) ** 2
      )
      if (distance < 20 && !currentPlayer.powerUp) {
        powerUp.collected = true
        currentPlayer.powerUp = {
          type: powerUp.type,
          remainingTime: getPowerUpDuration(powerUp.type)
        }
        console.log(`拾取道具: ${powerUp.type}`)
      }
    }
  })
}

// 道具持续时间
const getPowerUpDuration = (type) => {
  const durations = {
    lightning: 8,
    shield: 12,
    bomb: 0, // 瞬间使用
    ghost: 10
  }
  return durations[type] || 0
}

// 使用道具
const usePowerUp = () => {
  if (!currentPlayer.powerUp) return

  const type = currentPlayer.powerUp.type
  console.log(`使用道具: ${type}`)

  switch (type) {
    case 'lightning':
      currentPlayer.movementSpeed = 320 // +60%
      setTimeout(() => {
        currentPlayer.movementSpeed = 200
      }, 8000)
      break
    
    case 'shield':
      // 护盾效果在碰撞检测中处理
      break
    
    case 'bomb':
      // 在当前位置创建圆形领地
      const bombTerritory = createCircleTerritory(currentPlayer.x, currentPlayer.y, 30)
      currentPlayer.territories.push(bombTerritory)
      currentPlayer.territoryArea += Math.PI * 30 * 30
      break
    
    case 'ghost':
      // 幽灵效果在碰撞检测中处理
      break
  }

  if (type !== 'bomb') {
    // 非炸弹道具不立即消耗
  } else {
    currentPlayer.powerUp = null
  }
}

// 创建圆形领地
const createCircleTerritory = (centerX, centerY, radius) => {
  const points = []
  for (let i = 0; i < 32; i++) {
    const angle = (i / 32) * Math.PI * 2
    points.push({
      x: centerX + Math.cos(angle) * radius,
      y: centerY + Math.sin(angle) * radius
    })
  }
  return { points, area: Math.PI * radius * radius }
}

// 玩家移动
const updatePlayerMovement = (deltaTime) => {
  if (!currentPlayer.isAlive) return

  let dx = 0, dy = 0
  const speed = currentPlayer.movementSpeed * (deltaTime / 1000)
  
  // 短暂加速
  const boost = keys.space ? 1.5 : 1
  
  if (keys.w) dy -= speed * boost
  if (keys.s) dy += speed * boost
  if (keys.a) dx -= speed * boost
  if (keys.d) dx += speed * boost

  // 计算新位置
  const newX = currentPlayer.x + dx
  const newY = currentPlayer.y + dy

  // 检查边界
  if (isWithinCircularBounds(newX, newY)) {
    currentPlayer.x = newX
    currentPlayer.y = newY

    // 自动画线逻辑
    const distanceFromSpawn = Math.sqrt(
      (currentPlayer.x - currentPlayer.spawnPoint.x) ** 2 + 
      (currentPlayer.y - currentPlayer.spawnPoint.y) ** 2
    )

    if (!currentPlayer.isDrawing && distanceFromSpawn > 50) {
      // 离开安全区，开始画线
      currentPlayer.isDrawing = true
      currentPlayer.path = [{ x: currentPlayer.x, y: currentPlayer.y }]
      console.log('开始画线')
    } else if (currentPlayer.isDrawing) {
      // 添加轨迹点
      currentPlayer.path.push({ x: currentPlayer.x, y: currentPlayer.y })
      
      // 检查是否回到安全区
      if (distanceFromSpawn <= 50 && currentPlayer.path.length > 3) {
        // 完成圈地
        completePath()
      }
    }

    // 检查道具拾取
    checkPowerUpPickup()
  }
}

// 完成画线圈地
const completePath = () => {
  if (currentPlayer.path.length < 3) return

  // 计算新领地面积（简化计算）
  const area = calculatePolygonArea(currentPlayer.path)
  if (area > 100) { // 最小面积限制
    currentPlayer.territories.push({
      points: [...currentPlayer.path],
      area: area
    })
    currentPlayer.territoryArea += area
    console.log(`完成圈地，新增面积: ${Math.floor(area)}`)
  }

  currentPlayer.isDrawing = false
  currentPlayer.path = []
}

// 计算多边形面积
const calculatePolygonArea = (points) => {
  let area = 0
  for (let i = 0; i < points.length; i++) {
    const j = (i + 1) % points.length
    area += points[i].x * points[j].y
    area -= points[j].x * points[i].y
  }
  return Math.abs(area) / 2
}

// AI玩家移动
const updateAIPlayers = (deltaTime) => {
  players.forEach(player => {
    if (!player.isAlive) return

    // 简单AI：随机移动
    const speed = 150 * (deltaTime / 1000)
    const angle = Math.random() * Math.PI * 2
    
    const newX = player.x + Math.cos(angle) * speed
    const newY = player.y + Math.sin(angle) * speed

    if (isWithinCircularBounds(newX, newY)) {
      player.x = newX
      player.y = newY

      if (player.isDrawing && player.path.length > 0) {
        player.path.push({ x: player.x, y: player.y })
        
        // 随机完成画线
        if (Math.random() < 0.01 && player.path.length > 10) {
          const area = calculatePolygonArea(player.path)
          if (area > 100) {
            player.territories.push({
              points: [...player.path],
              area: area
            })
            player.territoryArea += area
          }
          player.isDrawing = false
          player.path = []
        }
      } else if (!player.isDrawing && Math.random() < 0.005) {
        // 随机开始画线
        player.isDrawing = true
        player.path = [{ x: player.x, y: player.y }]
      }
    }
  })
}

// 更新排名
const updateRanking = () => {
  const allPlayers = [currentPlayer, ...players]
  allPlayers.sort((a, b) => b.territoryArea - a.territoryArea)
  allPlayers.forEach((player, index) => {
    player.rank = index + 1
  })
}

// 特殊事件系统
const triggerSpecialEvent = () => {
  const events = [
    {
      name: '重力反转',
      description: '移动方向反转！',
      duration: 20,
      effect: 'gravity_reverse'
    },
    {
      name: '时间加速',
      description: '所有玩家移动速度翻倍！',
      duration: 15,
      effect: 'time_acceleration'
    },
    {
      name: '道具雨',
      description: '大量道具从天而降！',
      duration: 0,
      effect: 'powerup_rain'
    }
  ]

  if (Math.random() < 0.001) { // 0.1%概率触发
    const event = events[Math.floor(Math.random() * events.length)]
    specialEvent.value = {
      ...event,
      remainingTime: event.duration
    }
    
    console.log(`特殊事件触发: ${event.name}`)
    
    // 执行事件效果
    executeSpecialEvent(event.effect)
    
    if (event.duration > 0) {
      const timer = setInterval(() => {
        specialEvent.value.remainingTime--
        if (specialEvent.value.remainingTime <= 0) {
          specialEvent.value = null
          clearInterval(timer)
        }
      }, 1000)
    } else {
      setTimeout(() => {
        specialEvent.value = null
      }, 3000)
    }
  }
}

// 执行特殊事件效果
const executeSpecialEvent = (effect) => {
  switch (effect) {
    case 'gravity_reverse':
      // 重力反转效果（在移动控制中处理）
      break
    case 'time_acceleration':
      // 时间加速效果
      currentPlayer.movementSpeed *= 2
      players.forEach(p => p.movementSpeed = (p.movementSpeed || 150) * 2)
      setTimeout(() => {
        currentPlayer.movementSpeed /= 2
        players.forEach(p => p.movementSpeed = (p.movementSpeed || 300) / 2)
      }, 15000)
      break
    case 'powerup_rain':
      // 道具雨
      for (let i = 0; i < 8; i++) {
        const angle = Math.random() * Math.PI * 2
        const distance = Math.random() * mapSize.radius
        const x = mapSize.width / 2 + Math.cos(angle) * distance
        const y = mapSize.height / 2 + Math.sin(angle) * distance
        
        powerUps.push({
          id: `rain_powerup_${i}_${Date.now()}`,
          type: ['lightning', 'shield', 'bomb', 'ghost'][Math.floor(Math.random() * 4)],
          x: x,
          y: y,
          collected: false
        })
      }
      break
  }
}

// 玩家死亡
const killPlayer = (reason = '被截断') => {
  if (!currentPlayer.isAlive) return
  
  currentPlayer.isAlive = false
  currentPlayer.isDrawing = false
  currentPlayer.path = []
  currentPlayer.consecutiveDeaths++
  
  deathMessage.value = reason
  respawnCountdown.value = currentPlayer.consecutiveDeaths >= 2 ? 8 : 5
  
  // 保留20%领地面积
  currentPlayer.territoryArea = Math.max(currentPlayer.territoryArea * 0.2, 7854)
  
  const timer = setInterval(() => {
    respawnCountdown.value--
    if (respawnCountdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
  
  console.log(`玩家死亡: ${reason}, 复活倒计时: ${respawnCountdown.value}秒`)
}

// 玩家复活
const respawn = () => {
  if (respawnCountdown.value > 0) return
  
  currentPlayer.isAlive = true
  currentPlayer.x = currentPlayer.spawnPoint.x
  currentPlayer.y = currentPlayer.spawnPoint.y
  currentPlayer.invincibilityEndTime = Date.now() + 5000 // 5秒无敌
  
  console.log('玩家复活')
}

// 绘制游戏
const draw = () => {
  const canvas = gameCanvas.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  
  // 清空画布
  ctx.fillStyle = '#2C3E50'
  ctx.fillRect(0, 0, mapSize.width, mapSize.height)
  
  // 绘制地图边界（圆形）
  ctx.strokeStyle = '#34495E'
  ctx.lineWidth = 3
  ctx.beginPath()
  ctx.arc(mapSize.width / 2, mapSize.height / 2, mapSize.radius, 0, Math.PI * 2)
  ctx.stroke()
  
  // 绘制中心争夺区
  ctx.fillStyle = 'rgba(241, 196, 15, 0.1)'
  ctx.beginPath()
  ctx.arc(mapSize.width / 2, mapSize.height / 2, 80, 0, Math.PI * 2)
  ctx.fill()
  ctx.strokeStyle = '#F1C40F'
  ctx.lineWidth = 2
  ctx.stroke()
  
  // 绘制道具
  powerUps.forEach(powerUp => {
    if (powerUp.collected) return
    
    const icon = getPowerUpIcon(powerUp.type)
    const colors = {
      lightning: '#3498DB',
      shield: '#F39C12',
      bomb: '#E74C3C',
      ghost: '#9B59B6'
    }
    
    ctx.fillStyle = colors[powerUp.type] || '#95A5A6'
    ctx.beginPath()
    ctx.arc(powerUp.x, powerUp.y, 15, 0, Math.PI * 2)
    ctx.fill()
    
    ctx.fillStyle = 'white'
    ctx.font = '16px Arial'
    ctx.textAlign = 'center'
    ctx.fillText(icon, powerUp.x, powerUp.y + 5)
  })
  
  // 绘制所有玩家的领地
  const allPlayers = [currentPlayer, ...players]
  allPlayers.forEach(player => {
    // 安全区
    ctx.fillStyle = player.color + '20'
    ctx.strokeStyle = player.color
    ctx.lineWidth = 2
    ctx.setLineDash([5, 5])
    ctx.beginPath()
    ctx.arc(player.spawnPoint.x, player.spawnPoint.y, 50, 0, Math.PI * 2)
    ctx.fill()
    ctx.stroke()
    ctx.setLineDash([])
    
    // 领地
    player.territories.forEach(territory => {
      ctx.fillStyle = player.color + '40'
      ctx.strokeStyle = player.color
      ctx.lineWidth = 1
      ctx.beginPath()
      if (territory.points.length > 0) {
        ctx.moveTo(territory.points[0].x, territory.points[0].y)
        for (let i = 1; i < territory.points.length; i++) {
          ctx.lineTo(territory.points[i].x, territory.points[i].y)
        }
        ctx.closePath()
        ctx.fill()
        ctx.stroke()
      }
    })
    
    // 当前绘制路径
    if (player.isDrawing && player.path.length > 1) {
      ctx.strokeStyle = player.color
      ctx.lineWidth = 3
      ctx.beginPath()
      ctx.moveTo(player.path[0].x, player.path[0].y)
      for (let i = 1; i < player.path.length; i++) {
        ctx.lineTo(player.path[i].x, player.path[i].y)
      }
      ctx.stroke()
    }
  })
  
  // 绘制玩家
  allPlayers.forEach(player => {
    if (!player.isAlive) return
    
    // 玩家圆形
    ctx.fillStyle = player.color
    ctx.beginPath()
    ctx.arc(player.x, player.y, 8, 0, Math.PI * 2)
    ctx.fill()
    
    // 无敌状态闪烁
    if (player.id === currentPlayer.id && currentPlayer.invincibilityEndTime && Date.now() < currentPlayer.invincibilityEndTime) {
      ctx.strokeStyle = 'white'
      ctx.lineWidth = 3
      ctx.setLineDash([2, 2])
      ctx.beginPath()
      ctx.arc(player.x, player.y, 12, 0, Math.PI * 2)
      ctx.stroke()
      ctx.setLineDash([])
    }
    
    // 玩家名称
    ctx.fillStyle = 'white'
    ctx.font = '12px Arial'
    ctx.textAlign = 'center'
    ctx.fillText(player.name, player.x, player.y - 15)
  })
  
  // 绘制小地图
  drawMinimap()
}

// 绘制小地图
const drawMinimap = () => {
  const canvas = minimapCanvas.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  const scale = 150 / mapSize.width
  
  // 清空
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
  ctx.fillRect(0, 0, 150, 150)
  
  // 地图边界
  ctx.strokeStyle = '#34495E'
  ctx.lineWidth = 1
  ctx.beginPath()
  ctx.arc(75, 75, 75 * (mapSize.radius / (mapSize.width / 2)), 0, Math.PI * 2)
  ctx.stroke()
  
  // 玩家位置
  const allPlayers = [currentPlayer, ...players]
  allPlayers.forEach(player => {
    if (!player.isAlive) return
    
    ctx.fillStyle = player.color
    ctx.beginPath()
    ctx.arc(player.x * scale, player.y * scale, 3, 0, Math.PI * 2)
    ctx.fill()
  })
}

// 游戏主循环
const gameUpdate = (currentTime) => {
  const deltaTime = currentTime - lastTime
  lastTime = currentTime
  
  if (gameRunning.value && gameTime.value > 0) {
    // 更新游戏时间
    if (Math.floor(currentTime / 1000) !== Math.floor((currentTime - deltaTime) / 1000)) {
      gameTime.value--
      if (gameTime.value <= 0) {
        gameRunning.value = false
        console.log('游戏结束')
      }
    }
    
    // 更新玩家移动
    updatePlayerMovement(deltaTime)
    
    // 更新AI玩家
    updateAIPlayers(deltaTime)
    
    // 更新道具倒计时
    if (currentPlayer.powerUp && currentPlayer.powerUp.remainingTime > 0) {
      if (Math.floor(currentTime / 1000) !== Math.floor((currentTime - deltaTime) / 1000)) {
        currentPlayer.powerUp.remainingTime--
        if (currentPlayer.powerUp.remainingTime <= 0) {
          currentPlayer.powerUp = null
          currentPlayer.movementSpeed = 200 // 重置速度
        }
      }
    }
    
    // 更新排名
    updateRanking()
    
    // 触发特殊事件
    triggerSpecialEvent()
    
    // 绘制游戏
    draw()
  }
  
  gameLoop = requestAnimationFrame(gameUpdate)
}

// 事件处理
const handleKeyDown = (event) => {
  const key = event.key.toLowerCase()
  if (key in keys) {
    keys[key] = true
    event.preventDefault()
  }
  
  // 道具使用
  if (key === 'j' && currentPlayer.powerUp) {
    usePowerUp()
  }
  
  // 复活
  if (key === ' ' && !currentPlayer.isAlive && respawnCountdown.value <= 0) {
    respawn()
  }
}

const handleKeyUp = (event) => {
  const key = event.key.toLowerCase()
  if (key in keys) {
    keys[key] = false
    event.preventDefault()
  }
}

const handleMouseMove = (event) => {
  // 鼠标移动事件（如需要）
}

// 初始化
onMounted(async () => {
  await nextTick()
  
  // 设置canvas焦点
  if (gameCanvas.value) {
    gameCanvas.value.focus()
  }
  
  // 启动游戏循环
  gameLoop = requestAnimationFrame(gameUpdate)
  
  // 添加全局键盘事件监听
  document.addEventListener('keydown', handleKeyDown)
  document.addEventListener('keyup', handleKeyUp)
  
  console.log('模拟游戏已启动')
})

onUnmounted(() => {
  if (gameLoop) {
    cancelAnimationFrame(gameLoop)
  }
  
  document.removeEventListener('keydown', handleKeyDown)
  document.removeEventListener('keyup', handleKeyUp)
})
</script>

<style scoped>
.mock-game-container {
  display: flex;
  height: 100vh;
  background: #1a252f;
  color: white;
  font-family: 'Arial', sans-serif;
}

.game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 2px solid #34495e;
}

.game-info {
  display: flex;
  gap: 30px;
  align-items: center;
}

.time-display {
  font-size: 24px;
  font-weight: bold;
  color: #e74c3c;
}

.player-info {
  display: flex;
  gap: 20px;
  font-size: 16px;
}

.territory-area {
  color: #3498db;
  font-weight: bold;
}

.rank {
  color: #f39c12;
  font-weight: bold;
}

.power-up-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

.power-up-icon {
  font-size: 24px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.power-up-icon.lightning { background: #3498db; }
.power-up-icon.shield { background: #f39c12; }
.power-up-icon.bomb { background: #e74c3c; }
.power-up-icon.ghost { background: #9b59b6; }

.power-up-timer {
  font-weight: bold;
  color: white;
}

.game-canvas-container {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #2c3e50;
}

.game-canvas {
  border: 3px solid #34495e;
  border-radius: 10px;
  cursor: crosshair;
  outline: none;
}

.minimap {
  position: absolute;
  top: 20px;
  right: 20px;
  border: 2px solid #34495e;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
}

.minimap-canvas {
  display: block;
  border-radius: 8px;
}

.death-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.death-message {
  text-align: center;
  color: white;
}

.death-message h2 {
  color: #e74c3c;
  font-size: 36px;
  margin-bottom: 30px;
}

.timer-circle {
  width: 100px;
  height: 100px;
  border: 4px solid #34495e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  background: #2c3e50;
}

.timer-text {
  font-size: 32px;
  font-weight: bold;
  color: #e74c3c;
}

.respawn-btn {
  padding: 15px 30px;
  font-size: 18px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.respawn-btn:hover {
  background: #2ecc71;
}

.special-event-overlay {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.event-notification {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px 30px;
  border-radius: 15px;
  text-align: center;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: pulse 2s infinite;
}

.event-notification h3 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.event-notification p {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.event-timer {
  font-size: 20px;
  font-weight: bold;
  color: #f1c40f;
}

.leaderboard {
  width: 300px;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-left: 3px solid #34495e;
}

.leaderboard h3 {
  text-align: center;
  margin-bottom: 20px;
  color: #f39c12;
  font-size: 20px;
}

.player-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: background-color 0.3s;
}

.player-item.current {
  background: rgba(46, 204, 113, 0.3);
  border: 2px solid #2ecc71;
}

.player-item.dead {
  opacity: 0.5;
  background: rgba(231, 76, 60, 0.3);
}

.rank {
  font-weight: bold;
  font-size: 18px;
  color: #f39c12;
  width: 30px;
}

.player-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid white;
}

.player-name {
  flex: 1;
  font-size: 14px;
}

.territory-size {
  font-weight: bold;
  color: #3498db;
  font-size: 14px;
}

.controls-info {
  width: 200px;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-left: 3px solid #34495e;
}

.controls-info h4 {
  text-align: center;
  margin-bottom: 15px;
  color: #3498db;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

kbd {
  background: #34495e;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  min-width: 20px;
  text-align: center;
}

@keyframes pulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); }
}
</style>